import { defineComponent, inject, markRaw, onMounted, shallowRef, toRaw, watch } from 'vue'
import ItemNode from '../../ItemNode/ItemNode'
import classes from '../../ItemNode/ItemNode.module.css'
import { ElInput, ElText } from 'element-plus'
import { editing } from '../../store/store'
import Tip from '../../panel/Tip.vue'

export default class NReference extends ItemNode {
  isNReference = true
  isCommonNode = true

  constructor(node?: NReference) {
    super(node)

    if (!node) {
      this.path = './components/NReference/NReference.tsx'
      this.name = '引用组件'

      const style = this.props.style
      this.props.style = {
        ...style,
        minHeight: '20px'
      }

      this.props.referenceUuid = null
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          const anchorStyle: any = {
            position: 'absolute',
            right: 0,
            top: 0,
            padding: '2px 8px',
            cursor: 'pointer',
            fontSize: '12px',
            color: 'var(--color-font-1)',
            background: 'var(--color-4)'
          }

          const allPages: any = inject('allPages')

          const referenceNode: any = shallowRef()

          const render = () => {
            const referenceUuid = this.props.referenceUuid?.trim()
            let refNode = null
            let result = true

            allPages.value?.forEach((page) =>
              page.traverse((node) => {
                if (node.uuid === referenceUuid) refNode = toRaw(node)
              })
            )

            if (referenceUuid == this.uuid) result = false
            this.traverseAncestors((node) => toRaw(node) === refNode && (result = false))

            if (result) {
              referenceNode.value = refNode
            }
          }

          watch(() => this.props.referenceUuid, render)

          onMounted(() => render())

          return () => (
            <pComponent class="container">
              {referenceNode.value ? (
                <referenceNode.value.component></referenceNode.value.component>
              ) : null}
              {editing.value ? <div style={anchorStyle}>选中引用组件</div> : null}
            </pComponent>
          )
        },
        {
          name: 'NReference'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        return () => <pView style="color: var(--color-font-1)">uuid</pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                引用节点uuid
                <Tip content={'不能引用本身和父节点'}></Tip>
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.referenceUuid} clearable></ElInput>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }
}
